<template>
  <!--  面包屑导航-->
  <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>分类参数</el-breadcrumb-item>
  </el-breadcrumb>
  <!--  卡片区域-->
  <el-card>
    <!--    消息警告区域-->
    <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false" show-icon> </el-alert>
    <!--    选择商品分类区域-->
    <el-row>
      <el-col :span="16">
        <span>选择商品分类：</span>
        <el-cascader
            v-model="casCarderValue"
            :options="casCarderOptions"
            :props="casCarderProps"
            @change="casCaderExpandChange"
        ></el-cascader>
      </el-col>
    </el-row>
    <!--    标签区域-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" :disabled="isBtnDisabled" @click="openDynamicDialog">动态参数</el-button>
        <!--        动态参数展示区域-->
        <el-table :data="manyTableList" border stripe v-show="manyTableList.length!==0">
          <el-table-column type="expand"></el-table-column>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="attr_name" label="动态参数"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="primary" @click="openEditDialog(scope.row)"><i class="iconfont icon-edit">修改</i></el-button>
              <el-button type="danger" @click="deleteParams(scope.row)"><i class="iconfont icon-delete">删除</i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" :disabled="isBtnDisabled" @click="openDynamicDialog">静态属性</el-button>
        <!--        静态属性展示区域-->
        <el-table :data="onlyTableList" border stripe v-show="onlyTableList.length!==0">
          <el-table-column type="expand"></el-table-column>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="attr_name" label="静态属性"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="primary" @click="openEditDialog(scope.row)"><i class="iconfont icon-edit">修改</i></el-button>
              <el-button type="danger" @click="deleteParams(scope.row)"><i class="iconfont icon-delete">删除</i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!--    添加参数展示对话框-->
    <el-dialog v-model="dynamicDialogVisible" :title="'添加'+textTitle" @close="resetDynamicForm">
      <!--      表单区域-->
      <el-form ref="dynamicFormRef" :model="dynamicForm" :rules="dynamicFormRules">
        <el-form-item :label="textTitle" prop="attr_name">
          <el-input v-model="dynamicForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <!--      底部区域-->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dynamicDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDialog">确认</el-button>
      </span>
      </template>
    </el-dialog>
    <!--    编辑参数展示对话框-->
    <el-dialog v-model="editDialogVisible" title="编辑参数" @close="resetEditForm">
      <!--      表单区域-->
      <el-form ref="editFormRef" :model="editForm" :rules="editFormRules">
        <el-form-item label="编辑参数" prop="attr_name">
          <el-input v-model="editForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <!--      底部区域-->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确认</el-button>
      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">

import {
  AddDynamicOrStatic,
  DeleteParamsManament,
  DeleteUser,
  EditParamsManament,
  GetCategoriesList,
  GetCategoriesParamsList
} from "@/api";
import {ElMessage, ElMessageBox} from "element-plus";

import {computed, reactive, ref} from "vue";
import {ICategoriesInfo} from "@/util/interface";

//级联选择器数据源
const casCarderOptions = ref([])
//级联选择器配置选项
const casCarderProps = reactive({
  expandTrigger: 'hover',
  value: 'cat_id',
  label: 'cat_name',
  children: 'children',
})
const casCarderValue = ref([])
const queryCategoriesInfo: ICategoriesInfo = {
  type: 3,
}
const getCategories = async ()=>{
  const {data: res} = await GetCategoriesList(queryCategoriesInfo)
  if(res.meta.status !== 200){return ElMessage.error('获取商品分类数据失败')}
  casCarderOptions.value = res.data
}
getCategories()
//按钮是否禁用
const isBtnDisabled = computed(()=>{
  return casCarderValue.value.length !== 3;
})
//级联选择框选项发生变化
const casCaderExpandChange = (newVal:any)=>{
  getParamsData()
}


//标签页区域
const activeName = ref('many')
const handleClick = (tab: string, event: Event) => {
  getParamsData()
}
//动态参数列表
const manyTableList = ref([])
const onlyTableList = ref([])
//获取动态参数数据列表
const getParamsData = async ()=>{
  if(casCarderValue.value.length !== 3) {
    casCarderValue.value = []
    return
  }
  // console.log(casCarderValue.value)
  const {data: res} = await GetCategoriesParamsList(casCarderValue.value[2], {sel: activeName.value})
  if (res.meta.status!== 200) { return ElMessage.error('获取分类参数失败')}
  ElMessage.success('获取分类参数成功')
  if(activeName.value === 'many'){
    manyTableList.value = res.data
    // console.log(manyTableList.value)
  }else{
    onlyTableList.value = res.data
    // console.log(onlyTableList.value)
  }
}
//打开动态参数对话框
const textTitle = computed(()=>{
  return activeName.value === 'many' ? '动态参数' : '静态属性'
})
const dynamicDialogVisible = ref(false)
const dynamicForm = reactive({
  attr_name: ''
})
const dynamicFormRef: any = ref(null)
const dynamicFormRules = reactive({
  attr_name:[{
    required: true, message: '请输入名称', trigger: 'blur'
  }]
})

const openDynamicDialog = ()=>{
  dynamicDialogVisible.value = true
}
//重置动态参数表单
const resetDynamicForm = ()=>{
  dynamicFormRef.value.resetFields()
}
//确认添加动态参数
const confirmDialog = ()=>{
    dynamicFormRef.value.validate(async (valid: boolean)=>{
      if(!valid){return ElMessage.error('参数不符合要求')}
      const {data: res} = await AddDynamicOrStatic(casCarderValue.value[2], {
        attr_name: dynamicForm.attr_name,
        attr_sel: activeName.value
      })
      // console.log(res)
      if(res.meta.status !== 201){return ElMessage.error(res.meta.msg)}
      ElMessage.success(res.meta.msg)
      getParamsData()
      dynamicDialogVisible.value = false
    })
}
//编辑参数对话框
const editDialogVisible = ref(false)
const editForm = reactive({
  cat_id: 0,
  attr_id: 0,
  attr_name: '',
})
const editFormRef: any = ref(null)
const editFormRules = reactive({
  attr_name: [{
    required: true, message: '请输入名称', trigger: 'blur'
  }]
})
//打开编辑对话框
const openEditDialog = (currentRow: any)=>{
  console.log(currentRow)
  editForm.attr_name = currentRow.attr_name
  editForm.cat_id = currentRow.cat_id
  editForm.attr_id = currentRow.attr_id
  editDialogVisible.value = true
}
//重置编辑对话框表单
const resetEditForm = ()=>{
  editFormRef.value.resetFields()
}
//确认提交参数
const confirmEdit = ()=>{
  editFormRef.value.validate(async (valid:boolean)=>{
    if(!valid){return ElMessage.error('请确认参数是否合法')}
    const {data: res} = await EditParamsManament(editForm.cat_id, editForm.attr_id, {
      attr_sel: activeName.value,
      attr_name: editForm.attr_name
    })
    ElMessage.success('修改参数成功')
    console.log(res)
    getParamsData()
    editDialogVisible.value = false
  })
}
//删除参数
const deleteParams =async (currentRow: any)=>{
  ElMessageBox.confirm(
      '此操作将永久删除用户信息，是否确认删除？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        const {data: res} = await DeleteParamsManament(currentRow.cat_id, currentRow.attr_id)
        console.log(res)
        if(res.meta.status !== 200){return ElMessage.error('删除失败')}
        getParamsData()
        ElMessage.success('已成功删除参数')
      })
      .catch(() => {
        ElMessage.info('已取消删除')
      })
}

</script>

<style lang="less" scoped>
.el-cascader{
  width: 120px;
}
.el-row{
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>